<template>
    <div>
        我是电影中心
        
        <div class="box">
            <ul>
                <li v-for="data in dataList" :key="data.id">
                    {{data}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// 用于演示better-scroller
import betterSroller from 'better-scroll'
import http from "@/utils/https.js";

export default {
    data () {
        return {
            dataList : []
        }
    },
    mounted () {
        http.httpB().then(res=>{
            this.dataList = res.data
        }),
        // 完全上树(dom树)之后,才会执行
        this.$nextTick(()=>{
            // new betterSroller('.box')

            // 可以配置一些属性
            new betterSroller('.box',{
                //滚动条
                scrollbar:{
                    fade: true
                }

            })
        })
    }
}
</script>
<style lang="scss" scoped>
    .box{
        // 当渲染的li多于400px时,就会进行滚动,和只显示这些内容
        height: 400px;

        overflow: hidden;
        position: relative;       //修复滚动条位置
    }
</style>